決定採用css3_animationsk的技術
---套件開發申請單---

套件名稱:rySpriteMaker
套件型態:軍隊 (軍隊/英雄) 分別代表很多widget或是只有一個widget
套件用途:在畫面上產生換圖動畫
套件特色&規格:
必要參數有
圖片的url
每一格的起始X軸、起始Y軸、圖寬、圖高。
fps

附加參數有
漸淡
zIndex
執行總秒數
是否移除

套件角色說明:
1.一個顯示的div叫作一個widget

決定採用css3_animationsk的技術
http://www.w3schools.com/css3/css3_animations.asp

不過在IE要IE10才能跑的樣子，恩...不鳥他。

#animated_div
{
    width:60px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    font-size:20px;
    padding:10px;
    animation:animated_div 5s 1;
    -moz-animation:animated_div 5s 1;
    -webkit-animation:animated_div 5s 1;
    -o-animation:animated_div 5s 1;
    border-radius:5px;
    -webkit-border-radius:5px;
}
1.#animated_div不必是一個圖，因為他也只是針對style設值而已
    個人感覺，相當類似以前的flash
2.animated_div是call function的概念，總共執行五秒、一次。
[code]
@keyframes animated_div
{
    0%		{transform: rotate(0deg);left:0px;}
    25%		{transform: rotate(20deg);left:0px;}
    50%		{transform: rotate(0deg);left:500px;}
    55%		{transform: rotate(0deg);left:500px;}
    70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100%	{transform: rotate(-360deg);left:0px;}
}   

記得要加上有前綴的版本
@-webkit-
@-moz-
@-o-
百分比是五秒之間到了哪個階段。
其中50%-55%並沒有改變CSS。
所以，就是單純的停留一下下
我覺得很不方便，因為如果我想確切的停留一秒我不知道怎麼弄。
所以其實在實作上，位移的部分我會避免使用自己寫
位移用jQuery來代勞即可，我這邊要專注我的sprite animation

再針對參數的部分作解說
-webkit-animation-name:myfirst; //function name
-webkit-animation-duration:5s; //動畫時間
-webkit-animation-timing-function:linear; //動畫曲線
-webkit-animation-delay:2s; //延遲
-webkit-animation-iteration-count:2; //執行次數
-webkit-animation-direction:normal; //alternate會反過來執行動畫 / normal